<template>
  <div class="clew">
    <!--<div class="item-box">
      <div class="item">
        <span class="title">城市</span>
        <a-select default-value="fuzhou" style="width: 540px" disabled>
          <a-select-option value="fuzhou">
            抚州
          </a-select-option>
        </a-select>
      </div>
      <div class="item">
        <span class="title">行业</span>
        <a-cascader
          :options="options"
          :display-render="displayRender"
          expand-trigger="hover"
          placeholder="请选择行业"
          @change="onChange"
          style="width: 540px"
        />
      </div>
      <div class="item item-three">
        <span class="title">商品关键词</span>
        <a-input style="width: 540px" placeholder="请输入商品关键词"/>
      </div>
    </div>
    <div class="btn-box">
      <a-button class="search-btn" @click="searchClick">
        查找企业
      </a-button>
    </div>-->

		<a-form layout="inline" class="ant-advanced-search-form" :label-col="{ span: 6 }" label-align="left">
			<a-row :gutter="24">
				<a-col :span="12">
					<a-form-item label="城市">
						<a-select default-value="1" style="width: 100%;">
							<a-select-option value="1">抚州</a-select-option>
							<a-select-option value="2">南昌</a-select-option>
							<a-select-option value="3">九江</a-select-option>
							<a-select-option value="4">上饶</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="行业">
						<a-select default-value="1" style="width: 100%;">
							<a-select-option value="1">抚州</a-select-option>
							<a-select-option value="2">南昌</a-select-option>
							<a-select-option value="3">九江</a-select-option>
							<a-select-option value="4">上饶</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="商品关键字">
						<a-input  v-model="form.keyword" placeholder="请输入关键字" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row class="btn-box">
				<a-col>
					<a-button type="primary" class="search-btn" @click="searchClick">
						查找企业
					</a-button>
				</a-col>
			</a-row>
		</a-form>
  </div>
</template>

<script>
	export default {
		name: 'clewSearch',
		props: ['showComponent'],
		data () {
			return {
				form: {
					keyword: ''
				},
				options: [
					{
						value: '餐饮',
						label: '餐饮',
						children: [
							{
								value: '中餐厅',
								label: '中餐厅'
							},
							{
								value: '外国餐厅',
								label: '外国餐厅'
							},
							{
								value: '快餐厅',
								label: '快餐厅'
							},
							{
								value: '咖啡厅',
								label: '咖啡厅'
							},
							{
								value: '冷饮店',
								label: '冷饮店'
							}
						]
					},
					{
						value: '购物',
						label: '购物',
						children: [
							{
								value: '商场',
								label: '商场'
							},
							{
								value: '便利店',
								label: '便利店'
							},
							{
								value: '电子卖场',
								label: '电子卖场'
							},
							{
								value: '超市',
								label: '超市'
							},
							{
								value: '家居建材市场',
								label: '家居建材市场'
							}
						]
					}
				]
			}
		},
		methods: {
			onChange () {},
			displayRender ({ labels }) {
				return labels[labels.length - 1]
			},
			searchClick () {
				this.$emit('update:showComponent', 'SearchResult')
			}
		}
	}
</script>

<style lang="less">
	.clew {
		height: 100%;
		margin: 20px 0 0 20px;
		background: @whiteBg;
		padding: 40px;
		.ant-advanced-search-form .ant-form-item {
			display: flex;
		}

		.ant-advanced-search-form .ant-form-item-control-wrapper {
			flex: 1;
		}
		.btn-box {
			text-align: center;
		}
		/*.item-box {
			display: flex;
			flex-wrap: wrap;
			.item {
				flex: 50%;
				display: flex;
				align-items: center;
				margin-bottom: 30px;
				.title {
					width: 250px;
					padding-left: 50px;
					font-size: 24px;
					color: #333;
				}
			}
			.item-three {
				flex: 100%;
			}
			/deep/ .ant-select-selection--single {
				height: 60px;
				.ant-select-selection__rendered {
					line-height: 60px;
				}
				.ant-select-selection-selected-value {
					color: #333;
					font-size: 24px;
				}
			}
			/deep/ .ant-input {
				height: 60px;
				font-size: 24px;
				color: #333;
			}
			/deep/ .ant-cascader-picker-label {
				height: 100%;
				font-size: 24px;
				color: #333;
			}
		}
		.btn-box {
			margin-top: 70px;
			text-align: center;
			.search-btn {
				width: 180px;
				height: 56px;
				background: #B51D22;
				border-radius: 4px;
				font-size: 24px;
				font-weight: 600;
				color: #FFFFFF;
			}
		}*/
	}
</style>
